<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<el-row :gutter="20">
					<el-col :span="16">
						<!-- <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">新增</el-button> -->
					</el-col>
					<el-col :span="8">
						<div class="mt-4">
							<el-input v-model="input" style="max-width: 600px; margin-bottom: 10px;" placeholder="请输入信息"
								class="input-with-select" @input="selectAllByIf(1)">
								<template #prepend>
									<el-select v-model="select" placeholder="选择查询的内容" style="width: 115px">
										<el-option label="历史员工名" value="mnamepass" />
										<el-option label="待审核员工名" value="mname" />
									</el-select>
								</template>
								<template #append>
									<el-button :icon="Search" />
								</template>
							</el-input>
						</div>
					</el-col>
					<el-tabs type="border-card" class="demo-tabs">
						<el-tab-pane>
							<template #label>
								<span class="custom-tabs-label">
									<el-icon>
										<calendar />
									</el-icon>
									<span>审批请假</span>
								</span>
							</template>
							<slot>
								<div style="padding:10px;" v-for="holiday in holidaysList" :key="holiday.hid">
									<el-divider />
									<el-page-header title="请假" icon="Coordinate">
										<template #content>
											<div class="flex items-center">
												<el-avatar class="mr-3" :size="45"
													:src="SERVER_ADDR + '/upload/' + holiday.medicalStaff.picdir" />
												<span class="text-large font-700 mr-3">&nbsp;{{
													holiday.medicalStaff.mname }}</span>
												&nbsp;
												<el-tag>{{ holiday.htype }}</el-tag>
											</div>
										</template>
										<template #extra>
											<div class="flex items-center">
												<el-popconfirm title="你确定同意吗？" confirm-button-text="确定"
													cancel-button-text="取消" @confirm="updateState(3, holiday.hid)">
													<template #reference>
														<el-button plain type="success" icon="Check">批准</el-button>
													</template>
												</el-popconfirm>
												<el-popconfirm title="你确定驳回吗？" confirm-button-text="确定"
													cancel-button-text="取消" @confirm="updateState(2, holiday.hid)">
													<template #reference>
														<el-button plain type="danger" icon="Close">驳回</el-button>
													</template>
												</el-popconfirm>
											</div>
										</template>

										<el-descriptions :column="3" class="mt-4">
											<el-descriptions-item label="用户名">
												{{ holiday.medicalStaff.musername }}
											</el-descriptions-item>
											<el-descriptions-item label="联系方式">
												{{ holiday.medicalStaff.mphone }}
											</el-descriptions-item>
											<el-descriptions-item label="时间">{{ holiday.startDate }} ——
												{{ holiday.endDate }}</el-descriptions-item>
											<el-descriptions-item label="员工号">
												<el-tag>{{ holiday.medicalStaff.mno }}</el-tag>
											</el-descriptions-item>
											<el-descriptions-item label="请假理由">
												{{ holiday.description }}
											</el-descriptions-item>
										</el-descriptions>
										<p class="mt-4 text-sm">
											为构建和谐社会、和谐校园，本着对公司负责，对自己负责的态度，<b>本人郑重承诺：</b>在请假期间，
											严格遵守国家各项法律法规及，不做任何违反法律法规；请假期间的一切安全责任由我个人承担。
										</p>
										<el-divider />
									</el-page-header>
								</div>
							</slot>
							<!-- 分页开始 -->
							<div style="width: 100%; height: auto;">
								<el-row class="row-bg" justify="center">
									<el-col :span="5">
										<div class="grid-content ep-bg-purple" />
									</el-col>
									<el-col :span="8">
										<el-pagination background layout="prev, pager, next"
											:page-count="holidayPageInfo.pages" @change="selectAll"
											style="margin-top: 10px; margin-left: 30%;"
											v-model:urrent-page="holidayPageInfo.pageNum" />
									</el-col>
									<el-col :span="5">
										<div class="grid-content ep-bg-purple" />
									</el-col>
								</el-row>
							</div>
							<!-- 分页结束 -->
						</el-tab-pane>
						<el-tab-pane label="请假记录">
							<template #label>
								<span class="custom-tabs-label">
									<el-icon>
										<Edit />
									</el-icon>
									<span>请假记录</span>
								</span>
							</template>
							<slot>
								<el-table :data="holidaysPassList.list" border style="width: 100%; margin-top: 30px;">
									<el-table-column prop="medicalStaff.mno" label="员工号" width="150px" />
									<el-table-column prop="medicalStaff.mname" label="员工姓名" width="100px" />
									<el-table-column prop="picdir" label="头像" width="110px">
										<template #default="scope">
											<el-avatar :size="80"
												:src="SERVER_ADDR + '/upload/' + scope.row.medicalStaff.picdir"></el-avatar>
										</template>
									</el-table-column>
									<el-table-column prop="htype" label="请假类型" width="100px" />
									<el-table-column prop="description" label="请假理由" width="200px" />
									<el-table-column prop="startDate" label="开始时间" width="200px" />
									<el-table-column prop="endDate" label="结束时间" width="200px" />
									<el-table-column prop="medicalStaff.mphone" label="联系方式" width="135px" />
									<el-table-column label="操作" width="100px">
										<template #default="scope">
											<el-button type="primary" style="width: 15px;" :icon="View" @click="selectByhid(scope.row.hid)"/>
										</template>
									</el-table-column>
								</el-table>
								<!-- 分页开始 -->
								<div style="width: 100%; height: auto;">
									<el-row class="row-bg" justify="center">
										<el-col :span="5">
											<div class="grid-content ep-bg-purple" />
										</el-col>
										<el-col :span="8">
											<el-pagination background layout="prev, pager, next"
												:page-count="holidaysPassList.pages" @change="selectAllPass"
												style="margin-top: 10px; margin-left: 30%;"
												v-model:urrent-page="holidaysPassList.pageNum" />
										</el-col>
										<el-col :span="5">
											<div class="grid-content ep-bg-purple" />
										</el-col>
									</el-row>
								</div>
								<!-- 分页结束 -->
							</slot>
						</el-tab-pane>
					</el-tabs>
				</el-row>
			</el-card>
		</el-col>
	</el-row>
<!-- 详细信息框开始 -->
	<el-drawer v-model="drawer" title="详细信息" :with-header="false">
		<el-descriptions title="详细信息" direction="vertical" border style="margin-top: 20px">
			<el-descriptions-item :rowspan="2" :width="140" label="照片" align="center">
				<el-image style="width: 100px; height: 100px"
					:src="`${SERVER_ADDR}/upload/${holidayInformation.medicalStaff.picdir}`" />
			</el-descriptions-item>
			<el-descriptions-item label="员工号">{{holidayInformation.medicalStaff.mno}}</el-descriptions-item>
			<el-descriptions-item label="员工姓名">{{holidayInformation.medicalStaff.mname}}</el-descriptions-item>
			<el-descriptions-item label="联系电话">{{holidayInformation.medicalStaff.mphone}}</el-descriptions-item>
			<el-descriptions-item label="性别">{{holidayInformation.medicalStaff.mgender}}</el-descriptions-item>
			<el-descriptions-item label="用户名">{{holidayInformation.medicalStaff.musername}}</el-descriptions-item>
			<el-descriptions-item label="开始时间">{{holidayInformation.startDate}}</el-descriptions-item>
			<el-descriptions-item label="结束时间">{{holidayInformation.endDate}}</el-descriptions-item>
			<el-descriptions-item label="请假事由">{{holidayInformation.description}}</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
<!-- 详细信息框结束 -->
</template>
<script setup>
import medicalApi from '@/api/admin/medicalApi.js';
import { ref, resolveDirective } from 'vue';
import { ElMessage } from 'element-plus';
import { Search, Calendar, View } from '@element-plus/icons-vue'
import holidaysApi from '@/api/admin/holidaysApi.js';
import { ElNotification } from 'element-plus'
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//显示所有的待审核的请假
const holidaysList = ref([]);
const holidayPageInfo = ref({});
//定义查询所有未审核的方法
const selectAll = (pageNum) => {
	holidaysApi.selectAll(pageNum,input.value)
		.then(resp => {
			holidayPageInfo.value = resp.data
			holidaysList.value = resp.data.list
		})
}
//审核请假
const updateState = (state, hid) => {
	holidaysApi.updateState(state, hid)
		.then(resp => {
			if (resp.code == 10000) {
				if (state == 3) {
					ElNotification({
						title: '审核成功',
						message: '祝你生活愉快，天天开心',
						type: 'success',
					})
				} else {
					ElNotification({
						title: '驳回成功',
						message: '祝你生活顺利',
						type: 'error',
					})
				}
				selectAll(holidayPageInfo.value.pageNum);
				selectAllPass(holidaysPassList.value.pageNum);
			} else {
				ElNotification({
					title: '服务器出错了',
					message: resp.msg,
					type: 'error',
				})
			}
		})
}
const holidaysPassList = ref([]);
//查询请假记录的方法
const selectAllPass = (pageNum) => {
	holidaysApi.selectAllpass(pageNum, input.value)
		.then(resp => {
			holidaysPassList.value = resp.data
		})
}
const holidayInformation = ref({});
const drawer = ref(false);
//回显详细信息
const selectByhid = (hid) =>{
	holidaysApi.selectByHid(hid)
		.then(resp => {
			if(resp.code == 10000){
				holidayInformation.value = resp.data
				drawer.value = true
			}
		})
}
const select = ref('')
const input = ref('')
//条件查询
const selectAllByIf = ()=>{
	console.log(select.value,input.value)
	if(select.value == 'mnamepass'){
		selectAllPass(1);
	}
	if(select.value == 'mname'){
		selectAll(1);
	}
}
selectAllPass(1);
selectAll(1)
</script>
<style scoped>
.demo-progress .el-progress--line {
	margin-bottom: 10px;
	max-width: 100%;
}

.avatar-uploader,
.avatar {
	width: 178px;
	height: 178px;
	display: block;
	border: 1px dotted #dcdfe6;
	border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
}

.input-with-select .el-input-group__prepend {
	background-color: var(--el-fill-color-blank);
}

.demo-tabs>.el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
	vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}
</style>